<template>
	<view class="bgf">
		<view class="box">
			<view class="menu_content_box">
				<view class="re">
					<!--轮播图-->
					<swiper class="swiper_focus" :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration" :indicator-color="indicatorColor"
						:indicator-active-color="indicatorActiveColor" :circular="circular" @change="onswiperChange">
						<swiper-item v-for="(item ,index) in detail.imgList" :key="index">
							<image  :lazy-load="true" :src="item.url" mode="widthFix"></image>
						</swiper-item>
					</swiper>
					<!--轮播图-->
					<view class="swiper_serial_number">{{index}}/{{detail.imgList.length}}</view>
					<!-- 返回-按钮 -->
					<view class="back_btn_pos">
						<image  :lazy-load="true" @tap="back" src="/static/icon_arrow_3.png" class="img9"></image>
					</view>
				</view>

				<view class="pt30 pb30 pl30 pr30 bgf">
					<view class="fwb cor_F23"><text class="fs30">￥</text><text class="fs42">{{detail.price}}</text>
					</view>
					<view class="mt25 fs32 fwb cor_000">{{detail.name}}</view>
				</view>

				<view class="mt15 area_block_1 pt10 pb30">
					<view class="df fw fldr">
						<view class="mt30 wp33 tac" v-for="(item, index) in detail.infoList" :key="index">
							<view class="re">
								<image  :lazy-load="true" :src="item.icon" class="img10 vt"></image>
							</view>
							<view class="mt15 fs24 fwb cor_000">{{item.key}}</view>
							<view class="mt20 fs22 fwb cor_999">{{item.value}}</view>
						</view>
					</view>
					<!-- <view class="mt35 df aic jcc">
            <image  :lazy-load="true" src="/static/icon_security.png" class="img11"></image>
            <view class="ml10 fs24 cor_000">管家已去现场与设备合影，改设备真实存在，真实在售</view>
          </view> -->
				</view>

				<!-- 咨询车况 -->
				<view class="mt15 area_block_1 pt25 pb25 pl15">
					<view class="flex_box aic">
						<view class="re mr15">
							<image  :lazy-load="true" :src="detail.compStore.icon" class="img12"></image>
						</view>
						<view class="item">
							<view class="fs32 fwb cor_000">{{detail.compStore.name}}</view>
							<view class="mt35 df aic fs24 cor_000">
								<image  :lazy-load="true" src="/static/icon_security.png" class="img11"></image>
								<view class="ml5">店铺已经过深度核验，点击进入</view>
							</view>
						</view>
						<!-- <view class="ml15 look_or_service_btn">咨询车况</view> -->
					</view>
				</view><!-- 咨询车况 -->

				<!-- 车况报告 -->
				<view class="mt15 area_block_1 pt35 pb35 pl25">
					<view class="flex_box aic">
						<view class="item">
							<view class="fs32 fwb cor_000">商铺地址</view>
							<view class="mt30 fs24 cor_333">区域：{{detail.compStore.place}}</view>
							<view class="mt10 fs24 lh32 cor_333">详细地址：{{detail.compStore.address}}</view>
						</view>
						<view class="ml15 look_or_service_btn" @tap="toLoadMap">详细查看</view>
					</view>
				</view><!-- 车况报告 -->

				<!-- 商品详情 -->
				<view class="mt45">
					<view class="df aic jcc">
						<view class="line_hor_sty"></view>
						<view class="ml25 mr25 fs32 fwb cor_000">商品详情</view>
						<view class="line_hor_sty"></view>
					</view>
					<view class="mt35 pa20 bgf" v-for="(item, k) in detail.imgList" :key="k">
						<view class="re">
							<image  :lazy-load="true" :src="item.url" class="wp100" mode="widthFix"></image>
						</view>
					</view>
				</view><!-- 商品详情 -->

			</view>

			<!-- 立刻咨询-按钮 -->
			<view class="flex_box" v-if="beMyStore">
				<view class="item">
					<view class="modify_btn" @tap="toEdit">修改</view>
				</view>
				<view class="item">
					<view class="delete_btn" @tap="del">删除</view>
				</view>
			</view>

			<!-- 立即咨询-按钮 -->
			<view v-if="!beMyStore" class="consult_immediately_btn">立即咨询</view>

		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		compDetailPageApi,
		deleteCompApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				imgUrls: [
					'/static/banner_2.png',
					'/static/banner_2.png',
					'/static/banner_2.png'
				],
				autoplay: true,
				interval: 3000,
				duration: 300,
				indicatorDots: false,
				circular: true,
				indicatorColor: '#fff',
				indicatorActiveColor: '#0692ff',
				autoplayNews: true,
				intervalNews: 3000,
				durationNews: 300,
				index: "1", //轮播当前序号
				id: 0,
				store_id: 0,
				detail: '',
				beMyStore: false
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.store_id = options.store_id;
			this.loadPartDetail();
		},
		methods: {
			loadPartDetail: function() {
				let that = this;
				showLoading();
				compDetailPageApi({
					id: this.id,
					userId: uni.getStorageSync('userId')
				}).then(res => {
					console.log(res)
					that.detail = res.data;
					that.beMyStore = res.data.beMyStore;
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},
			del() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除吗',
					success: function(res) {
						if (res.confirm) {
							deleteCompApi({
								id: that.id,
								store_id: that.store_id
							}).then(result => {
								uni.showToast({
									title: '删除成功',
									icon: 'none',
									success() {
										uni.navigateTo({
											url: '/pages/shop_preview/shop_preview?id=' +
												that.store_id + '&type=storeId'
										})
									}
								})

							}).catch(err => {
								console.log(err)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			toLoadMap: function() {
				uni.navigateTo({
					url: '/pages/shop_preview/shop_preview?id=' + this.id
				})
			},
			toEdit: function() {
				uni.redirectTo({
					url: '/pages/accessories_information_editing/accessories_information_editing?id=' + this
						.id + '&store_id=' + this.store_id
				})
			},
			onswiperChange: function(e) {
				this.index = e.detail.current + 1
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 163rpx);
		background-color: #f6f6f6;
		margin-top: 65rpx;
	}

	.swiper_focus {
		width: 100%;
		height: 690rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.swiper_focus image {
		height: 100%;
		width: 100%;
	}

	.swiper_serial_number {
		position: absolute;
		bottom: 23rpx;
		right: 30rpx;
		width: 90rpx;
		height: 46rpx;
		line-height: 46rpx;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		background: rgba(0, 0, 0, .23);
		border-radius: 23rpx;
		z-index: 2;
	}

	.back_btn_pos {
		position: absolute;
		top: 41rpx;
		left: 29rpx;
		width: 64rpx;
		height: 64rpx;
		z-index: 3;
	}

	.area_block_1 {
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 16rpx;
		margin-right: 16rpx;
	}

	.look_or_service_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 108rpx;
		height: 48rpx;
		font-size: 22rpx;
		color: #fff;
		background-image: linear-gradient(to right, #f44f33, #e7170b);
		border-radius: 24rpx 0 0 24rpx;
	}

	.line_hor_sty {
		width: 174rpx;
		height: 1px;
		background-color: #b6b6b6;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.modify_btn,
	.delete_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 98rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
	}

	.modify_btn {
		background-color: #f44f33;
	}

	.delete_btn {
		background-color: #e10d09;
	}
</style>
